<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="common::head"></head>
    <title>录取列表</title>
</head>
<body>
<div class="container-fluid">
    <div class="row">
            <div class="panel-group" id="panel-group-accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <a data-toggle="collapse" data-parent="#panel-group-accordion"  href="#search-condition-body"
                               class="btn btn-primary btn-sm" role="button">
                                折叠/展开 筛选条件
                            </a>
                        </h3>
                    </div>
                    <div id="search-condition-body" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div class="row">
                                <form id="form" role="form">
                                    <div class="form-group col-md-2">
                                        <label class="col-form-label">学生姓名：</label>
                                        <input type="text" class="form-control" id="username" name="menuName" placeholder="输入学生姓名...">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!--<hr class="mt-2">-->
                <div class="panel">
                    <div class="panel-heading">
                        菜单维护
                    </div>
                    <div class="panel-body">
                        <div class="fixed-table-toolbar">
                            <div class="bs-bars float-right">
                                <div id="toolbar">
                                    <!--<button class="btn btn-primary" onclick="returnPrePage()">
                                        <i class="glyphicon glyphicon-arrow-left"></i>
                                        返回
                                    </button>-->
                                    <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
                                        <i class="glyphicon glyphicon-plus"></i>
                                        新增
                                    </button>
                                    <button class="btn btn-primary btn-sm" onclick="reload()">
                                        <i class="glyphicon glyphicon-search"></i>
                                        查询
                                    </button>
                                    <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#importModel">
                                        <i class="glyphicon glyphicon-download-alt"></i>
                                        导入
                                    </button>
                                    <button class="btn btn-primary btn-sm" onclick="exportExcel()">
                                        <i class="glyphicon glyphicon-download-alt"></i>
                                        导出
                                    </button>
                                    <button class="btn btn-danger btn-sm" onclick="deleteRow()">
                                        <i class="glyphicon glyphicon-remove"></i>
                                        删除
                                    </button>
                                </div>
                            </div>
                        </div>
                        <table id="table" class="table"></table>
                    </div>
                </div>
            </div>
            <!--模态框-->
            <div id="importModel" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="myLargeModalLabel">导入文件</h4>
                        </div>
                        <div class="modal-body">
                            <form id="importExcelForm">
                                <div class="form-group">
                                    <div class="col-xs-12">
                                        <input class="form-control" type="file" id="file" name="file" placeholder="请选择文件..">
                                    </div>
                                    <div>
                                        <button class="btn btn-danger btn-sm" onclick="importExcel()">
                                            <i class="glyphicon glyphicon-ok"></i>
                                            确认
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="myLargeModalLabel">新增菜单</h4>
                        </div>
                        <div class="modal-body">
                            <form id="menuAddForm">
                                <div class="form-group">
                                    <label class="col-xs-12" for="menuName">菜单名称</label>
                                    <div class="col-xs-12">
                                        <input class="form-control" type="text" id="menuName" name="menuName" placeholder="菜单名称..">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12" for="menuUrl">菜单URL</label>
                                    <div class="col-xs-12">
                                        <input class="form-control" type="text" id="menuUrl" name="menuUrl" placeholder="菜单URL..">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12" for="menuUrl">菜单级别</label>
                                    <div class="col-xs-12">
                                        <input class="form-control" type="text" id="menuLevel" name="menuLevel" placeholder="菜单级别..">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12" for="menuUrl">父级菜单</label>
                                    <div class="col-xs-12">
                                        <select class="form-control" id="parentId" name="parentId" size="1">
                                            <option value="">无</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12" for="menuUrl">排序</label>
                                    <div class="col-xs-12">
                                        <input class="form-control" type="text" id="menuSort" name="menuSort" placeholder="排序..">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12" for="menuUrl">菜单类型</label>
                                    <div class="col-xs-12">
                                        <input class="form-control" type="text" id="menuType" name="menuType" placeholder="菜单类型..">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12" for="menuUrl">菜单图标</label>
                                    <div class="col-xs-12">
                                        <input class="form-control" type="text" id="menuIcon" name="menuIcon" placeholder="菜单图标..">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12" for="menuUrl">备注</label>
                                    <div class="col-xs-12">
                                        <input class="form-control" type="text" id="remark" name="remark" placeholder="备注..">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer" style="margin-top: 10px">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="saveMenuAddInfo()">点击保存</button>
                        </div>
                    </div>
                </div>
            </div>
</div>

<div th:replace="common::js-basic"></div>
<div th:replace="common::js-table">
</div>

<script type="text/javascript">

    var $table = $("#table");

    $table.bootstrapTable({
        //toggle: 'table',
        toolbar: '#toolbar',
        url: '/student/list',
        toolbarAlign: 'right',
        trimOnSearch: 'true',
        sidePagination: 'server',
        queryParams: 'queryParams',
        idField: 'id',
        pagination: true,
        rowStyle: 'rowStyle',
        uniqueId:'id',
        //showExport: true, //是否显示导出
        //exportDataType: "selected", //basic', 'all', 'selected'.
        //showRefresh: true, //是否显示刷新按钮
        responseHandler: function(res){
            rowsData = res.rows;
            return {
                total: res.total,//总页数
                rows: res.rows //数据
            };
        },
        columns: [
            {
                checkbox: true
            }, {
                title: '序号',
                formatter: function (value, row, index) {
                    var pageSize = $table.bootstrapTable('getOptions').pageSize;
                    var pageNumber = $table.bootstrapTable('getOptions').pageNumber;
                    return pageSize * (pageNumber - 1) + index + 1;
                }
            }, {
                field: 'id',
                title: 'id',
                visible: false
            }, {
                field: 'username',
                title: '学生姓名'
            },
            {
                field: 'sex',
                title: '性别'
            },{
                field: 'province',
                title: '省份'
            }, {
                field: 'idcard',
                title: '身份证号'
            }, {
                field: 'studentId',
                title: '学号'
            }, {
                field: 'college',
                title: '学院'
            }, {
                field: 'profession',
                title: '专业'
            }, {
                field: 'class',
                title: '班级'
            },
            {
                field: 'gmtCreate',
                title: '导入时间'
            }],
        onEditableSave: function (field, row, oldValue, $el) {
            alert('ok');
            $.ajax({
                type: "post",
                url: "/Edit/",
                data: row,
                dataType: 'JSON',
                success: function (data) {
                    console.log(data)
                },
                error: function (err) {
                    console.log(err)
                },
                complete: function () {
                }

            });
        }
    });

    function queryParams(params) {
        //params['sort'] = encodeURI('apply_datetime desc');
        //params['order'] = 'desc';
        $('#form').find('input[name]').each(function () {
            params[$(this).attr('name')] = $(this).val();
        });
        $('#form').find('select[name]').each(function () {
            params[$(this).attr('name')] = $(this).val();
        });
        return params;
    }

    function deleteRow() {
        var ids = getIdSelections();
        var jsonData={"ids":ids+""};
        console.log(jsonData);
        $.ajax({
            url:'/student/delete',
            type:'POST',
            data:jsonData,
            dataType:'json',
            success:function (res) {
                if (res.code==1){
                    alert(res.msg);
                    reload();
                } else{
                    alert("失败"+res.msg);
                }
            },
            error:function () {
                alert('查询出错！');
            }
        });
    }

    function getIdSelections() {
        return $.map($("#table").bootstrapTable('getSelections'), function (row) {
            return row.id
        });
    }

    function reload() {
        $table.bootstrapTable('refresh');
    }

    function exportExcel() {

        window.location.href = "/student/export?"+$('#form').serialize();
    }
    
    function importExcel() {

        var files = $('#file').prop('files');
        var formData = new FormData();
        formData.append('file', files[0]);

        $.ajax({
            url:"/student/import",
            type:'POST',
            data:formData,
            dataType:'json',
            cache: false,
            async:true,
            // 告诉jQuery不要去处理发送的数据
            processData : false,
            // 告诉jQuery不要去设置Content-Type请求头
            contentType : false,
            success:function (res) {
                console.log(res);
            },
            error:function () {
                alert('上传出错，请稍后重试!');
            }
        });
    }

</script>
</body>
</html>